<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <title>shopping</title>
</head>

<body>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <div class="code-container">
              <input name="code" type="text" placeholder="短信验证码">
              <span class="msg"></span>
              <a class="code" href="javascript:;">发送验证码</a>
            </div>
            <span class="msg"></span>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">已阅读并同意</label>
            <a href="javascript:;" class="agreement-link">《用户服务协议》</a>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script>
    const code = document.querySelector('.code')
    let flag = true
    // 点击发送验证码后倒计时
    code.addEventListener('click', function () {
      if (flag) {
        flag = false
        let i = 60
        code.innerHTML = `${i}秒后再次发送`
        let timeID = setInterval(() => {
          i--
          code.innerHTML = `${i}秒后再次发送`

          // 当倒计时等于0时终止
          if (i === 0) {
            clearInterval(timeID)
            code.innerHTML = `重新获取`
            flag = true
          }
        }, 1000);

      }
    })



    // 1.验证用户名合法性
    const username = document.querySelector('[name=username]')
    // 当表单的值发生变化时才判断是否合法
    username.addEventListener('change', modify)
    // 封装检验函数，因为要检验多个表单
    function modify() {
      // 定义正则
      const rule = /^[a-zA-Z0-9]{6,10}$/
      // const span = document.querySelector('[class="msg"]')
      // 用兄弟元素获取span，每次修改只需获取表单即可
      const span = username.nextElementSibling


      // // 若正则不通过提示
      if (!rule.test(username.value)) {
        span.innerText = '请输入6-10位的用户名'
        return false
      }
      // 通过修改span
      else {
        span.innerText = ''
        return true
      }
    }


    // 2.验证手机号合法性
    const phone = document.querySelector('[name=phone]')
    // 当表单的值发生变化时才判断是否合法
    phone.addEventListener('change', modifyphone)
    // 封装检验函数，因为要检验多个表单
    function modifyphone() {
      // 定义正则
      const rule = /^1\d{10}$/
      // const span = document.querySelector('[class="msg"]')
      // 用兄弟元素获取span，每次修改只需获取表单即可
      const span = phone.nextElementSibling
      // // 若正则不通过提示
      if (!rule.test(phone.value)) {
        span.innerText = '请输入11位的手机号'
        return false
      }
      // 通过修改span
      else {
        span.innerText = ''
        return true
      }
    }

    // 3.验证验证码合法性
    const codeipt = document.querySelector('[name=code]')
    // 当表单的值发生变化时才判断是否合法
    codeipt.addEventListener('change', modifycodeipt)
    // 封装检验函数，因为要检验多个表单
    function modifycodeipt() {
      // 定义正则
      const rule = /^\d{6}$/
      // const span = document.querySelector('[class="msg"]')
      // 用兄弟元素获取span，每次修改只需获取表单即可
      const span = codeipt.nextElementSibling
      // // 若正则不通过提示
      if (!rule.test(codeipt.value)) {
        span.innerText = '请输入6位的验证码'
        return false
      }
      // 通过修改span
      else {
        span.innerText = ''
        return true
      }
    }


    // 4.验证密码合法性
    const password = document.querySelector('[name=password]')
    // 当表单的值发生变化时才判断是否合法
    password.addEventListener('change', modifypassword)
    // 封装检验函数，因为要检验多个表单
    function modifypassword() {
      // 定义正则
      const rule = /^[a-zA-Z0-9]{6,20}$/
      // const span = document.querySelector('[class="msg"]')
      // 用兄弟元素获取span，每次修改只需获取表单即可
      const span = password.nextElementSibling


      // // 若正则不通过提示
      if (!rule.test(password.value)) {
        span.innerText = '请输入6-20位密码'


        return false
      }
      // 通过修改span
      else {
        span.innerText = ''
        return true
      }
    }


    // 4.再次验证密码合法性
    const confirm = document.querySelector('[name=confirm]')
    // 当表单的值发生变化时才判断是否合法
    confirm.addEventListener('change', modifyconfirm)
    // 封装检验函数，因为要检验多个表单
    function modifyconfirm() {

      // const span = document.querySelector('[class="msg"]')
      // 用兄弟元素获取span，每次修改只需获取表单即可
      const span = confirm.nextElementSibling


      // // 若正则不通过提示
      if (confirm.value !== password.value) {
        span.innerText = '密码与上面不一致，请再次输入'
        return false
      }
      // 通过修改span
      else {
        span.innerText = ''
        return true
      }
    }

    // 6.勾选协议
    const quren = document.querySelector('[name=agreement]')
    quren.addEventListener('click', function () {
      // 没有添加，有则取出
      quren.classList.toggle('icon-queren2')
    })


    // 7.提交验证
    const submit = document.querySelector('.submit')
    submit.addEventListener('click', function (e) {
      // 验证确认协议
      if (!quren.classList.contains('icon-queren2')) {
        // 阻止默认行为
        alert('请确认用户协议')
        e.preventDefault()
      }
      // 验证每个表单
      // 逻辑与逻辑中断，一个一个显示未填写的表单
      if (!(modify() && modifyphone() && modifycodeipt() && modifypassword() && modifyconfirm())) {
        e.preventDefault()
      }
      else {
        e.preventDefault()
        location.href = 'index.html'
      }

    })
  </script>
</body>

</html>